import { ref, h } from "vue";
import { render } from "@/utils";
import { ipType } from "@/constant";
import usageRate from "common/usageRate.vue";
import LinkText from "@/components/LinkText/index.vue";
import TagStatus from "@/components/TagStatus/index.vue";
import ipPool from "./components/ipPool.vue";

export const columns = [
  {
    title: "名称",
    dataIndex: "name",
    tooltip: true,
    ellipsis: true,
    width: 200,
    render: ({ record }) =>
      h(LinkText, {
        label: record?.name,
        to: `/model-mgmt/layer-2subnet/detail/${record?.id}?name=${record?.name}`,
      }),
  },
  {
    title: "子网掩码",
    dataIndex: "maskAdd",
    tooltip: true,
    ellipsis: true,
    render,
    width: 150,
  },
  {
    title: "网关",
    dataIndex: "gatewayAdd",
    tooltip: true,
    ellipsis: true,
    render,
    // width: 200,
  },
  {
    title: "IP使用率",
    dataIndex: "IP",
    width: 180,
    render: ({ record }) =>
      h(usageRate, {
        total: record?.totalIp,
        used: record?.usedIp,
      }),
  },
  {
    title: "是否启用",
    slotName: "enabled",
    dataIndex: "enabled",
    width: 90,
  },
  {
    title: "共享子网",
    slotName: "isShared",
    dataIndex: "isShared",
    width: 90,
  },
  {
    title: "地址池",
    dataIndex: "ipPools",
    tooltip: true,
    ellipsis: true,
    render: ({ record }) => h(ipPool, { list: JSON.parse(record.ipPools) }),
    width: 220,
  },
  {
    title: "DNS",
    dataIndex: "dnsAdd1",
    tooltip: true,
    ellipsis: true,
    width: 200,
    render: ({ record }) =>
      h("div", [
        h("p", `dns1：${record?.dnsAdd1 || "-"}`),
        h("p", `dns2：${record?.dnsAdd2 || "-"}` || "-"),
      ]),
  },
  {
    title: "创建信息",
    dataIndex: "lastTime",
    slotName: "lastTime",
    width: 170,
    render: ({ record }) =>
      h(LinkText, { label: record?.createTime, desc: record?.createBy }),
  },
  {
    title: "变更信息",
    dataIndex: "lastTime",
    slotName: "lastTime",
    width: 170,
    render: ({ record }) =>
      h(LinkText, { label: record?.updateTime, desc: record?.updateBy}),
  },
  {
    title: "备注",
    dataIndex: "description",
    width: 90,
    tooltip: true,
    ellipsis: true,
    render,
  },
  {
    title: "操作",
    width: 110,
    dataIndex: "action",
    fixed: "right",
    slotName: "action",
  },
];
export const ipUsedcolumns = [
  {
    title: "IP地址",
    dataIndex: "ipAddress",
    slotName: "ipAddress",
    tooltip: true,
    ellipsis: true,
  },
  {
    title: "关联云机",
    dataIndex: "vmName",
    tooltip: true,
    ellipsis: true,
    render: ({ record }) =>
      h(LinkText, { label: record?.vmName, desc: record?.instanceName }),
    // width: 200,
  },
  {
    title: "归属人",
    dataIndex: "owner",
    tooltip: true,
    ellipsis: true,
    render,
    // width: 200,
  },
  {
    title: "状态",
    dataIndex: "runStatus",
    // width: 90,
    render: ({ record }) => h(TagStatus, { type: record.runStatus }),
  },
  {
    title: "数据中心/网络功能区",
    dataIndex: "modelList",
    slotName: "modelList",
    // width: 180,
    render: ({ record }) =>
      h(LinkText, { label: record?.dc, desc: record?.na }),
  },
  {
    title: "平台/集群",
    dataIndex: "platform",
    // width: 180,
    render: ({ record }) =>
      h(LinkText, { label: record?.platform, desc: record?.cluster }),
  },
  {
    title: "项目",
    dataIndex: "project",
    render,
    // width: 180,
    // render: ({ record }) =>h(LinkText, { label: record?.createTime, desc:record?.createBy}),
  },
  // {
  //   title: "操作",
  //   width: 110,
  //   dataIndex: "action",
  //   fixed: "right",
  //   slotName: "action",
  // },
];
export const ipReserved = [
  {
    title: "IP地址",
    dataIndex: "ipAddress",
    slotName: "ipAddress",
    tooltip: true,
    ellipsis: true,
    render,
  },
  {
    title: "类型",
    dataIndex: "type",
    render: ({ record }) => ipType[record?.type] || "-",
  },
  {
    title: "备注",
    dataIndex: "description",
    render,
  },
  {
    title: "操作",
    width: 100,
    dataIndex: "action",
    fixed: "right",
    slotName: "action",
  },
];
export const relatedSubnets = [
  {
    title: "名称",
    dataIndex: "name",
    tooltip: true,
    ellipsis: true,
  },
  {
    title: "平台/集群",
    dataIndex: "platform",
    // width: 180,
    render: ({ record }) =>
      h(LinkText, { label: record?.platform, desc: record?.cluster }),
  },
  {
    title: "地址池",
    dataIndex: "ipPools",
    tooltip: true,
    ellipsis: true,
    render: ({ record }) =>
      h(ipPool, { list: record?.ipPools ? JSON.parse(record?.ipPools) : [] }),
    width: 240,
  },
  {
    title: "网关",
    dataIndex: "gateway",
    tooltip: true,
    ellipsis: true,
    render,
    // width: 200,
  },
  {
    title: "DNS",
    dataIndex: "gatewayAdd",
    tooltip: true,
    ellipsis: true,
    render: ({ record }) =>
      h("div", [
        h("p", `dns1：${record?.dns1 || "-"}`),
        h("p", `dns2：${record?.dns1 || "-"}` || "-"),
      ]),
  },
  {
    title: "DHCP",
    dataIndex: "enabled",
    width: 90,
    render: ({ record }) => h(TagStatus, { type: record?.enabled }),
  },
  {
    title: "操作",
    width: 80,
    dataIndex: "action",
    fixed: "right",
    slotName: "action",
  },
];
export const relatedItpm = [
  {
    title: "项目",
    dataIndex: "lastTime",
    slotName: "lastTime",
    render: ({ record }) =>
      h(LinkText, { label: record?.cfname, desc: record?.createBy }),
  },
  {
    title: "项目ID",
    dataIndex: "id",
    render
  },
  {
    title: "关联人",
    dataIndex: "relationPerson",
    render
  },
  {
    title: "关联时间",
    dataIndex: "relationTime",
    render
  },
  {
    title: "操作",
    width: 110,
    dataIndex: "action",
    fixed: "right",
    slotName: "action",
  },
];
